/**
 * Created by ziyu on 2017/8/7.
 */

import React from 'react'
import { message, Pagination, Table, Tabs } from 'antd'
import Search from '../../common/components/Search'
import SearchStyle from '../../common/less/search.less'
import { fetchPost } from '../../../utils/request'
import moment from 'moment'
import Styles from './Index.less'


const TabPane = Tabs.TabPane

class Statement extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      activeKey: 'all',
      list: [],
      panelParams: [],
      params: {
        answerStartDate:  moment().subtract('days', 30),
        answerEndDate: moment().add('days', 5),
        newOrOld: null
      },
      searchParams: {
        list: [
          {
            name: 'Repayment Date',
            type: 'range',
            key: ['answerStartDate', 'answerEndDate'],
            className: 'pr20',
            placeHolder: '',
            values: [
              moment().subtract('days', 30),
              moment().add('days', 5)
            ]
          },
          {
            name: '',
            type: 'search',
            key: '',
            className: 'pr20',
            value: []
          }
        ],
        api: ''
      }
    }
  }

  componentDidMount () {
    this.getData()
  }

  getData () {
    fetchPost('/collection/collectionoverdueStatement/list', this.state.params).then((res) => {
      if (res.code === 0) {
        let list = res.data.result;
        if (list.length > 0) {
          this.setState({
            list,
          })
        } else {
          message.info('No Data');
          this.setState({
            list: [],
          })
        }
      } else {
        message.error(res.msg)
      }
    })
  }

  changeParams (date) {

    if (date.answerStartDate) {
      date.answerStartDate = date.answerStartDate
    }
    if (date.answerEndDate) {
      date.answerEndDate = date.answerEndDate
    }

    this.setState({
      params:{
        ...this.state.params,
        answerStartDate:date.answerStartDate,
        answerEndDate:date.answerEndDate
      },
    }, () => {
      this.getData()
    })
  }

  callback (key) {
    console.log(key)
    if (key === 'all') {
      this.setState({
        params: {
          ...this.state.params,
          newOrOld: null
        },
        activeKey: 'all'
      }, () => {
        this.getData()
      })
    } else if (key === 'new') {
      this.setState({
        params: {
          ...this.state.params,
          newOrOld: 1
        },
        activeKey: 'new'
      }, () => {
        this.getData()
      })
    } else if (key === 'old') {
      this.setState({
        params: {
          ...this.state.params,
          newOrOld: 0
        },
        activeKey: 'old'
      }, () => {
        this.getData()
      })
    }
  }

  notetodayrecode(date){
    if (new Date(date).toDateString() === new Date().toDateString()){
      return Styles.active;
    }
  }

  render () {
    const self = this
    const columns = [
      {
        title: 'Repayment Date',
        dataIndex: 'repaymentDate',
        key: 'repaymentDate',
        width: 100
      },
      {
        title: 'Repayment Count',
        dataIndex: 'numberOfRepayment',
        key: 'numberOfRepayment',
        width: 100
      },
      {
        title: 'Repaid Count',
        dataIndex: 'numberOfPayOff',
        key: 'numberOfPayOff',
        width: 100
      },
      {
        title: 'Repaid Proportion',
        dataIndex: 'payOffRate',
        key: 'payOffRate',
        width: 100
      },
      {
        title: 'Overdue Count',
        dataIndex: 'numberOfOverdue',
        key: 'numberOfOverdue',
        width: 100
      },
      {
        title: 'D0 OverDue Rate',
        dataIndex: 'overdue0Rate',
        key: 'overdue0Rate',
        width: 100
      },
      {
        title: 'Day7 OverDue Rate',
        dataIndex: 'overdue7Rate',
        key: 'overdue7Rate',
        width: 100
      },
      {
        title: 'Day15 OverDue Rate',
        dataIndex: 'overdue15Rate',
        key: 'overdue15Rate',
        width: 100
      },
      {
        title: 'Day20 OverDue Rate',
        dataIndex: 'overdue20Rate',
        key: 'overdue20Rate',
        width: 100
      },
      {
        title: 'OverDue Rate',
        dataIndex: 'nowOverdueRate',
        key: 'nowOverdueRate',
        width: 100
      },
      {
        title: 'S1 Call Back Rate',
        dataIndex: 'paidIn1T7Rate',
        key: 'paidIn1T7Rate',
        width: 100
      },
      {
        title: 'S2 Call Back Rate',
        dataIndex: 'paidIn8T15Rate',
        key: 'paidIn8T15Rate',
        width: 100
      },
      // {
      //   title: 'S3',
      //   dataIndex: 'paidIn16T20Rate',
      //   key: 'paidIn16T20Rate',
      //   width: 100
      // }
    ]

    return (
      <div>
        <div className={SearchStyle.searchClass}>
          <Search searchParams={this.state.searchParams} changeParams={(params) => this.changeParams(params)}/>
        </div>

        <div className="mt20">
          <Tabs className={Styles.tabs} activeKey={this.state.activeKey} onChange={(e) => {this.callback(e)}}>
            <TabPane tab="ALL" key="all">
              <Table dataSource={this.state.list}
                     loading={this.state.loading}
                     size='small'
                     pagination={false}
                     columns={columns}
                     bordered
                     rowClassName={(record) => this.notetodayrecode(record.repaymentDate)} />
              {/*<Pagination   style={{ marginTop: '20px'}}*/}
              {/*              current={self.state.page.currentPage}*/}
              {/*              total={self.state.page.totalCount || 0}*/}
              {/*              pageSize={self.state.page.pageSize || 0}*/}
              {/*              onChange={(current)=>{self.nextpage(current)}}*/}
              {/*              showSizeChanger={false}*/}
              {/*              showQuickJumper={true}*/}
              {/*              showTotal={total => `Total ${total} items`}*/}
              {/*/>*/}
            </TabPane>
            <TabPane tab="New User" key="new">
              <Table dataSource={this.state.list}
                     loading={this.state.loading}
                     size='small'
                     pagination={false}
                     columns={columns}
                     bordered
                     rowClassName={(record) => this.notetodayrecode(record.repaymentDate)} />
              {/*<Pagination   style={{ marginTop: '20px'}}*/}
              {/*              current={self.state.page.currentPage}*/}
              {/*              total={self.state.page.totalCount || 0}*/}
              {/*              pageSize={self.state.size || 0}*/}
              {/*              onChange={(current)=>{self.nextpage(current)}}*/}
              {/*              showSizeChanger={false}*/}
              {/*              showQuickJumper={true}*/}
              {/*              showTotal={total => `总共 ${total} 条`}*/}
              {/*/>*/}
            </TabPane>
            <TabPane tab="Repeat User" key="old">
              <Table dataSource={this.state.list}
                     loading={this.state.loading}
                     size='small'
                     pagination={false}
                     columns={columns}
                     bordered
                     rowClassName={(record) => this.notetodayrecode(record.repaymentDate)} />
              {/*<Pagination   style={{ marginTop: '20px'}}*/}
              {/*              current={self.state.page.currentPage}*/}
              {/*              total={self.state.page.totalCount || 0}*/}
              {/*              pageSize={self.state.page.pageSize || 0}*/}
              {/*              onChange={(current)=>{self.nextpage(current)}}*/}
              {/*              showSizeChanger={false}*/}
              {/*              showQuickJumper={true}*/}
              {/*              showTotal={total => `总共 ${total} 条`}*/}
              {/*/>*/}
            </TabPane>
          </Tabs>
        </div>
      </div>
    )
  }
}

export default Statement
